<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8">
   <title>自适应宽度的页面</title> 
   <!--使用名为viewport的meta值，其content指定自适应设备的宽度--> 
    <meta name="viewport"  content="width=device-width,  initial-scale=1">
    <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    </head>  
<body> 
  <div data-role="page"> 
  <div data-role="header"> 
   <h1>我的示例</h1> 
  </div><!-- /页面头区域 -->   
  <div data-role="content">   
   <p>Hello world</p>  
  </div><!-- /页面内容  --> 
  <div data-role="footer" data-position="fixed">
    <h4>页面脚注</h4>
  </div><!-- /脚注 -->  
 </div><!-- /页面标签 --> 
</body> 
</html>